<style>
.wrap1{
    background:url('/images/site_image/bg1.jpg');
    background-size:100% 100%;
}
.catalogTitle {
    width: 400px;
    margin:10px 168px;
    background:rgba(0,0,0,0.6);
    border-radius: 10px;
    height:46px; line-height:46px;
}
.catalogTitle h3 {
    font-size:24px;
    color:#fff;
    text-align: center;
}
.cataRom {
	width:620px;
	height:420px;
	margin-top:20px;
	margin-left:40px;
}
.single_image {
	width:300px;
	height:400px;
	display:block;
	margin-left:10px;
	float:left;
}
.single_image img {
	border:1px solid #bebebe;
}
</style>
<?php
$db = new DBQuery;
$sql = 'SELECT * FROM catalog';
$catalogs = $db->query($sql);
if($catalogs){
?>

<div class="cataRom">   
        <?php foreach($catalogs as $catalog):?>
       
        <figure>
            <a class="single_image" href="<?php echo $path_img_catalog . $catalog['cat_image'];?>">
                <img width='300' height='400' src="<?php echo $path_img_catalog . $catalog['cat_image'];?>" />
            </a>
        </figure>
        
        <?php endforeach; } else echo "không có catalog";?> 
</div>
<script>
$("a.single_image").fancybox({
    'transitionIn'	:	'elastic',
	'transitionOut'	:	'elastic',
	'speedIn'		:	600, 
	'speedOut'		:	200, 
	'overlayShow'	:	false
});
</script><script>
/*$('.menu_cat').hover(function(){
	$(this).css('background','none repeat scroll 0 0 rgba(255, 255, 255, 0.9)');
	$(this).find('.poster_film p').slideDown('fast');
	
},function(){
	$(this).css('background','none repeat scroll 0 0 rgba(1, 1, 1, 0.5)');
	$(this).find('.poster_film p').slideUp('fast');
});

//Sự kiện click vào từng categories sản phẩm thì thu nhỏ ảnh categories lại và hiện ra div danh sách sản phẩm
//của categories đó
$('.menu_cat').click(function(){
    $('.catalogCt').css({
        'background':'rgb(220,220,220)',
        'background':'rgba(225,225,225,0.7)',
    });
    $('.catalogCt').animate({
        padding:'15px'
    },500);
    $('.menu_cat').find('.poster_film p').css('font-size','12px');
    var cat_id = $(this).attr('data-cat-id');
    $('.menu_cat').css('border','none');
    $(this).css('border','5px solid #fbf501');
    $('.menu_cat').animate({
        width:'100',
        height:'100',
    },500,function(){
        $('.catalogSp').slideDown('fast',function(){
            
        });
    })
    data = {'cat':cat_id,'name':'catalog'};
    loadModule('.catalogSp',data,true);
});*/
</script>

